<template>
  <div 
    :class="[
      'bx-descriptions',
      'bx-glass',
      {
        [`bx-descriptions--${size}`]: size,
        'bx-descriptions--border': bordered
      }
    ]"
  >
    <div v-if="title || $slots.title" class="bx-descriptions__title">
      <slot name="title">{{ title }}</slot>
    </div>
    <div v-if="extra || $slots.extra" class="bx-descriptions__extra">
      <slot name="extra">{{ extra }}</slot>
    </div>
    <div class="bx-descriptions__body">
      <table class="bx-descriptions__table">
        <tbody>
          <tr v-for="(row, rowIndex) in processedData" :key="rowIndex">
            <template v-for="(item, itemIndex) in row" :key="itemIndex">
              <td 
                v-if="item.label !== undefined"
                class="bx-descriptions__label"
                :colspan="item.labelColspan"
              >
                {{ item.label }}
              </td>
              <td 
                v-if="item.content !== undefined"
                class="bx-descriptions__content"
                :colspan="item.contentColspan"
              >
                {{ item.content }}
              </td>
            </template>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'BxDescriptions',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    extra: {
      type: String,
      default: ''
    },
    column: {
      type: Number,
      default: 3
    },
    size: {
      type: String,
      default: 'medium',
      validator: (value) => ['small', 'medium', 'large'].includes(value)
    },
    bordered: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const processedData = computed(() => {
      const result = []
      let currentRow = []
      let currentCol = 0

      props.data.forEach(item => {
        const labelColspan = item.labelColspan || 1
        const contentColspan = item.contentColspan || 1

        // 如果当前行放不下，则开启新行
        if (currentCol + labelColspan + contentColspan > props.column) {
          // 填充当前行剩余的列
          while (currentCol < props.column) {
            currentRow.push({ content: '', contentColspan: props.column - currentCol })
            currentCol = props.column
          }
          result.push(currentRow)
          currentRow = []
          currentCol = 0
        }

        currentRow.push({
          label: item.label,
          labelColspan: labelColspan,
          content: item.content,
          contentColspan: contentColspan
        })
        currentCol += (labelColspan + contentColspan)

        // 如果当前行已满，则开启新行
        if (currentCol >= props.column) {
          result.push(currentRow)
          currentRow = []
          currentCol = 0
        }
      })

      // 添加最后一行（如果存在未满的行）
      if (currentRow.length > 0) {
        while (currentCol < props.column) {
          currentRow.push({ content: '', contentColspan: props.column - currentCol })
          currentCol = props.column
        }
        result.push(currentRow)
      }

      return result
    })

    return {
      processedData
    }
  }
}
</script>

<style scoped>
.bx-descriptions {
  font-family: var(--bx-font-family);
  color: var(--bx-text-primary);
  margin-bottom: 16px;
}

.bx-descriptions__title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.bx-descriptions__extra {
  float: right;
  margin-top: -38px;
  font-size: 14px;
  color: var(--bx-text-secondary);
}

.bx-descriptions__body {
  width: 100%;
  overflow: hidden;
}

.bx-descriptions__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.bx-descriptions--border .bx-descriptions__table {
  border: 1px solid var(--bx-glass-border);
}

.bx-descriptions__table tr {
  vertical-align: top;
}

.bx-descriptions--border .bx-descriptions__table tr {
  border-bottom: 1px solid var(--bx-glass-border);
}

.bx-descriptions--border .bx-descriptions__table tr:last-child {
  border-bottom: none;
}

.bx-descriptions__label,
.bx-descriptions__content {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
}

.bx-descriptions--border .bx-descriptions__label,
.bx-descriptions--border .bx-descriptions__content {
  border-right: 1px solid var(--bx-glass-border);
}

.bx-descriptions--border .bx-descriptions__label:last-child,
.bx-descriptions--border .bx-descriptions__content:last-child {
  border-right: none;
}

.bx-descriptions__label {
  color: var(--bx-text-secondary);
  background: rgba(255, 255, 255, 0.05);
  width: 120px; /* Default label width */
}

.bx-descriptions__content {
  color: var(--bx-text-primary);
}

/* Size variations */
.bx-descriptions--small .bx-descriptions__label,
.bx-descriptions--small .bx-descriptions__content {
  padding: 8px 12px;
  font-size: 13px;
}

.bx-descriptions--large .bx-descriptions__label,
.bx-descriptions--large .bx-descriptions__content {
  padding: 16px 20px;
  font-size: 15px;
}

/* Responsive */
@media (max-width: 768px) {
  .bx-descriptions__extra {
    position: static;
    float: none;
    margin-top: 0;
    margin-bottom: 12px;
  }
  .bx-descriptions__table,
  .bx-descriptions__table tbody,
  .bx-descriptions__table tr,
  .bx-descriptions__table td {
    display: block;
    width: 100%;
  }
  .bx-descriptions__label,
  .bx-descriptions__content {
    width: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--bx-glass-border);
  }
  .bx-descriptions__label {
    background: transparent;
    font-weight: 600;
  }
  .bx-descriptions__content {
    padding-left: 24px;
  }
  .bx-descriptions--border .bx-descriptions__label,
  .bx-descriptions--border .bx-descriptions__content {
    border-right: none;
  }
}
</style>

